<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../../css/login.css" />
    <script src="../../js/vue-v2.6.10.js"></script>
    <script src="../../js/axios-0.18.0.js"></script>
</head>

<body>
    <div id="app">
        <div class="pos">
            <div class="login">
                <span class="close iconfont icon-close" ></span>
                <img src="../../img/login/qichezulin.png" alt="">
                <ul>
                    <li></li>
                    <li class="phone" style="color: red;" v-html="msg"></li>
                    <li></li>
                </ul>
                <form action="" id="form">
                    <input type="text" class="tel"  placeholder="请输入您的手机号" v-model="phoneNumber" @blur="validatePhone(phoneNumber)">
                    <input type="password" class="pass"  placeholder="请输入密码" v-model="password" @blur="validatePassword(password)">
                    <em></em>
                    <div class="loginbtn" style="margin-left: 110px;line-height: 40px; cursor: pointer;" @click="submitForm()">
                        登陆
                    </div>
                </form>
                <p>
                    <span>
                        还没有账号?
                        <a href="../loginAndRegister/register.html">点击注册</a>
                    </span>
                </p>

            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg:"",
            phoneNumber:"",
            password:"",
            flag1:false,
            flag2:false

        },
        methods: {
            validatePhone(val){
                this.msg="";
                if(val==null||val.trim()==""){
                    this.msg="手机号不能为空";
                    return;
                }
                var reg = /^1[3|4|5|6|7|8][0-9]{9}$/;
                if(!reg.test(val)){
                    this.msg="手机号格式不正确";
                    return;
                }
                axios.get("/carOrder/selectPhone/"+val).then(resp =>{
                    if(resp.data.flag==false){
                        this.msg="手机号尚未注册"
                    }else{
                        this.flag1=true;
                    }
                })
            },
            validatePassword(val){
                this.msg="";
                if(val==null||val.trim()==""){
                    this.msg="密码不能为空";
                    return;
                }
                this.flag2 = true;
            },
            submitForm() {
                if (this.flag1 && this.flag2) {
                    axios.get("/carOrder/loginMember?phoneNumber="+this.phoneNumber+"&password="+this.password).then(resp => {
                        if (resp.data.flag) {
                            window.sessionStorage.setItem("login", JSON.stringify(resp.data.data));
                            location.href = "../../index.html";
                        } else {
                            alert("登录失败，请检查账号密码！")
                            location.href = "login.html";
                        }
                    })

                }

            }

        },
        created() {

        },

    })
</script>


</html>